#@head() 
#@header()
<!-- daterange picker -->
<link rel="stylesheet" href="#(path)/dist/plugins/daterangepicker/daterangepicker.css">
<!-- bootstrap datepicker -->
<link rel="stylesheet" href="#(path)/dist/plugins/datepicker/datepicker3.css">
 <link rel="stylesheet" href="#(path)/dist/plugins/datatables/dataTables.bootstrap.css">
<style type="text/css">
.select2-selection__choice{
	color:#000 !important;
}
</style>
<title>客户列表</title>
#@aside("client")
<div class="content-wrapper">
	<section class="content">
      <div class="row">
		<div class="col-xs-12">
				<div class="box box-info">
					<div class="box-header">
						<h3 class="box-title" style="margin-left: 10px;">待分配用户</h3>
		                <div class="input-group" style="float: right; display:inherit;">
		                  <button type="button" class="btn btn-default pull-right" id="daterange-btn">
		                    <span>
		                      <i class="fa fa-calendar"></i> #(from) 至 #(to)
		                    </span>
		                    <i class="fa fa-caret-down"></i>
		                  </button>
		                </div>
						<button id="allot" data-toggle="modal" data-target="#myModal" style="float: right; margin: 0 15px 5px 0; width: 80px;"
							type="button"  class="btn btn-block btn-success">随机分配</button>
						<div class="box-body">
							<table id="example1" class="table table-striped">
								<thead>
									<tr>
										<th>用户ID</th>
										<th>真实姓名</th>
										<th>手机号</th>
										<th>注册时间</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
									#for(record:list)
									<tr>
										<td>#(record.get("user_id"))</td>
										<td>#(record.get("real_name"))</td>
										<td>#(record.get("mobile"))</td>
										<td>#(record.get("row_add_time"))</td>
										<td>
											<a id="#(record.get("user_relation_id"))" data-toggle="modal" data-target="#myModal2" class="single btn btn-info">手动分配</a> 
										</td>
									</tr>
									#end
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">选择分配客服</h4>
            </div>
            <div class="modal-body">
				<select  id="user" class="select2" style="width:100%;" multiple="multiple">
					<option selected value="158979">谢忠山</option>
					<option selected value="3171">冯家圆</option>
				  	<option selected value="3676">吕珏</option>
				  	<option selected value="3677">施迪</option>
				  	<option selected value="12311">黄洁儿</option>
				  	<option selected value="19760">杨浩强</option>
				  	<option selected value="149691">张翔</option>
				  	<option selected value="157924">顾坚晴</option>
				  	<option selected value="148621">郑乾</option>
				</select>
			</div>
            <div class="modal-footer">
                <button id="close-btn"  type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="allot-btn"  type="button" class="btn btn-success">提交</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal2"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">选择分配客服</h4>
            </div>
            <div class="modal-body">
				<input type="hidden"  id="clientid" />
				<select  id="user2"  class="select" class="form-control" style="width:100%;" >
					<option selected value="158979">谢忠山</option>
					<option selected value="3171">冯家圆</option>
				  	<option selected value="3676">吕珏</option>
				  	<option selected value="3677">施迪</option>
				  	<option selected value="12311">黄洁儿</option>
				  	<option selected value="19760">杨浩强</option>
				  	<option selected value="149691">张翔</option>
				  	<option selected value="157924">顾坚晴</option>
				  	<option selected value="148621">郑乾</option>
				</select>
			</div>
            <div class="modal-footer">
                <button id="close-btn2"  type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="allot-btn2"  type="button" class="btn btn-success">提交</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
#@footer()
<!-- date-range-picker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="#(path)/dist/plugins/daterangepicker/daterangepicker.js"></script>
<!-- bootstrap datepicker -->
<script src="#(path)/dist/plugins/datepicker/bootstrap-datepicker.js"></script>
<!-- DataTables -->
<script src="#(path)/dist/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="#(path)/dist/plugins/datatables/dataTables.bootstrap.min.js"></script>
<script>
$(function () {
    $(".select2").select2();
    
    $('.single').click(function(){
    	$("#clientid").val($(this).attr("id"));
    });
    
    $('#allot-btn').click(function(){
    	var that = $(this);
    	that.html("数据处理中...");
    	ajax("#(path)/client/allot?type=1&from=#(from)&to=#(to)&user="+$("#user").val(),{},function(data){
	    	that.html("提交");
    		if(data.code=='ok'){
    			layer.msg('分配成功！', {icon : 1});
    			$('#close-btn').trigger("click");
    			location.reload();
    		}else if(data.code=='error'){
    			layer.msg('发生错误，请查看日志！', {icon : 2});
    		}
    	});
    });

    $('#allot-btn2').click(function(){
    	var that = $(this);
    	that.html("数据处理中...");
    	ajax("#(path)/client/allot?type=2&referees="+$("#user2").val()+"&from=#(from)&to=#(to)&clientid="+$("#clientid").val(),{},function(data){
	    	that.html("提交");
    		if(data.code=='ok'){
    			layer.msg('分配成功！', {icon : 1});
    			$('#close-btn2').trigger("click");
    			$('#'+$("#clientid").val()).parent().parent().remove();
    		}else if(data.code=='error'){
    			layer.msg('发生错误，请查看日志！', {icon : 2});
    		}
    	});
    });
    
    $('#example1').DataTable({
        "paging": true,
        "lengthChange": false,
        "searching": false,
        "ordering": false,
        "info": true,
        "autoWidth": false
    });
    
    $('#daterange-btn').daterangepicker({
		"locale": {
			"format": "YYYY-MM-DD",
            "separator": " - ",
            "applyLabel": "确定",
            "cancelLabel": "取消",
            "fromLabel": "From",
            "toLabel": "To",
            "customRangeLabel": "自定义",
            "daysOfWeek": [
            	"星期天",
                "星期六",
                "星期五",
                "星期四",
                "星期三",
                "星期二",
                "星期一"
			],
            "monthNames": [
                  "1月",
                  "2月",
                  "3月",
                  "4月",
                  "5月",
                  "6月",
                  "7月",
                  "8月",
                  "9月",
                  "10月",
                  "11月",
                  "12月"
            	],
              	"firstDay": 1
			},
          	ranges: {
            	'今天': [moment(), moment()],
            	'昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           	 	'过去7天': [moment().subtract(6, 'days'), moment()],
            	'过去30天': [moment().subtract(29, 'days'), moment()],
            	'这个月': [moment().startOf('month'), moment().endOf('month')],
            	'上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
          	},
          	startDate: moment().subtract(29, 'days'),
          	endDate: moment()
        },
        function (start, end) {
          	$('#daterange-btn span').html(start.format('YYYY-MM-DD') + ' 至 ' + end.format('YYYY-MM-DD'));
        	var from = start.format('YYYY-MM-DD');
        	var to = end.format('YYYY-MM-DD');
        	location.href = "#(path)/client/toAllot?from="+from+"&to="+to;
        }
    );
});
</script>
</body>
</html>